<template>
  <z-paging>
    <view class="header_box">
      <view class="biaoti_box">
        <view class="left_icon_box" @click="back">
          <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
        </view>
        <view class="center_biaoti_box">
          {{ detailObj.challenge_box_data.name }}
        </view>
        <view class="left_icon_box">
          <!-- 占位 -->
        </view>
      </view>
    </view>
    <view class="guangquan_box">
      <view class="shangpin_box">
        <image :src="bigObjImage" mode="scaleToFill" />
      </view>
      <!-- 包套排队锁锁相 -->
      <view v-if="detailObj.sy_miao > 0" class="pd_sx_box"
        style="background-image: url('https://www.dingxians.cn/upload/20250421/68060194141eb.png');">
        <view class="sx_tx_box">
          <image :src="detailObj.user_info.avatar" mode="scaleToFill" />
        </view>
        <view class="dwl_box slh">
          <tn-notice-bar :leftIcon="false" speed='20' :list="[detailObj.user_info.nickname]" mode="horizontal"
            color="rgba(255, 255, 255, .7)"></tn-notice-bar>
        </view>
        {{ package == 1 ? '包套' : '锁箱' }}剩余
        <view class="time_box">
          <uni-countdown color="#D0C300" @timeup="timeup" :show-day="false" :show-hour="false" :show-minute="false"
            :second="detailObj.sy_miao"></uni-countdown>S
        </view>
        <!-- <text style="text-decoration: underline;color: #999999;font-size: 20rpx;font-weight: bold;">取消排队</text> -->
      </view>
    </view>

    <view class="gn_box">
      <view class="last_xiang_box">
        <image @click="upperBtn" src="https://www.dingxians.cn/upload/20250325/67e23d99302d4.png" mode="scaleToFill" />
      </view>
      <view class="center_img" @click="switchBox">
        <image src="https://www.dingxians.cn/upload/20250325/67e23e1b3670e.png" mode="scaleToFill" />
      </view>
      <view class="next_xiang_box">
        <image @click="lowerBtn" src="https://www.dingxians.cn/upload/20250325/67e23c2b6ab3b.png" mode="scaleToFill" />
      </view>
      <view class="x_y_box">
        当前
        {{ detailObj.challenge_box_data.current_boxs || "" }}/{{ detailObj.challenge_box_data.total_boxs || "" }}箱
      </view>
      <view class="x_z_box">
        本箱剩余
        {{ detailObj.challenge_box_data.surplus_num || "" }}
      </view>

      <view v-if="catId == 1 || catId == 6" class="kongche_box"
        style="background-image: url('https://www.dingxians.cn/upload/20250421/6805fb06e622f.png');"
        v-html="detailObj.data[0].small_title">
      </view>
    </view>
    <view class="shangpin_box">
      <view class="dange_box" v-for="item, index in detailObj.data" :key="index" @click="spDet(item)">
        <view class="dengjiname_box">{{ item.level_id_name }}</view>
        <view class="sls_box">{{ item.num }}/{{ item.original_num }}</view>
        <view class="sp_box">
          <image :src="item.image" mode="scaleToFill" />
        </view>
        <!-- <view class="gl_box">概率：{{ item.probability * 1 }}%</view> -->
        <view class="name_box">{{ item.title }}</view>
      </view>
      <view style="width: 223rpx;" v-for="i in 2"></view>
    </view>
    <view style="height: 190rpx;"></view>

    <view class="pay_box1" v-if="catId != 1">
      <view class="dange_zhifubox" v-for="(item, index) in payList.slice(3, 6)" :key="index">
        <image @click="$no(openPay, item)" v-if="showMoreBtn" :src="item.url" mode="scaleToFill" />
      </view>
      <view class="btn-other-right" @click="showMoreBtn = !showMoreBtn">
        <text v-if="!showMoreBtn">其他</text>
        <image class="btn-close" v-else src="https://www.dingxians.cn/upload/user_static/index/btn-close.png">
        </image>
      </view>
    </view>
    <view class="pay_box">
      <view class="dange_zhifubox" v-for="(item, index) in payList.slice(0, 3)" :key="index"
        :style="{ backgroundImage: `url(${item.url})` }" @click="$no(openPay, item)"></view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="big_bg_box">
        <view class="close_box">
          <image @click="close" src="https://www.dingxians.cn/images/shop/close-btn.png" mode="scaleToFill" />
        </view>
        <view class="bottom_con_box"
          style="background-image: url('https://www.dingxians.cn/upload/user_static/common/bg-dialog.png');">
          <view class="top_title">
            <image src="https://www.dingxians.cn/upload/20250327/67e533c3f0cf7.png" mode="scaleToFill" />
          </view>
          <view class="zongji_box">
            <view class="left_box">总计</view>
            <view class="right_box">￥{{ zongjiPrice || '0' }}</view>
          </view>
          <view class="line_box" style="width: 654rpx;margin: auto;height: 2rpx;background-color: #D8D8D8;opacity: .4;">
          </view>
          <view class="zongji_box">
            <view class="left_box">虎币抵扣</view>
            <view class="right_box">
              <view class="pay_icon_box">
                <image src="https://www.dingxians.cn/upload/user_static/index/zuanshi.png" mode="scaleToFill" />
              </view>
              {{ point || '0' }}
            </view>
          </view>
          <view class="line_box" style="width: 654rpx;margin: auto;height: 2rpx;background-color: #D8D8D8;opacity: .4;">
          </view>
          <view class="zongji_box">
            <view class="left_box">虎元素抵扣</view>
            <view class="right_box">
              <view class="pay_icon_box">
                <image src="https://www.dingxians.cn/images/shop/money.png" mode="scaleToFill" />
              </view>
              {{ balance || '0' }}
            </view>
          </view>
          <view class="line_box"
            style="width: 654rpx;margin: auto;margin-bottom: 10rpx;height: 2rpx;background-color: #D8D8D8;opacity: .4;">
          </view>
          <template v-if="si_dPay">
            <view class="sel_pay_box">选择支付方式</view>
            <view class="zs_pay_box" @click="pay_more_mode = item.id" v-for="(item, index) in pay_mode_list">
              <view class="p_lk_box">
                <view class="wxicon_box">
                  <image :src="item.icon" mode="scaleToFill" />
                </view>
                {{ item.name }}
              </view>
              <view class="p_r_box">
                <image v-if="pay_more_mode === item.id" src="https://www.dingxians.cn/images/common/selected.png"
                  mode="scaleToFill" />
                <image v-else src="https://www.dingxians.cn/images/common/unselected.png" mode="scaleToFill" />
              </view>
            </view>
            <view class="line_box"
              style="width: 654rpx;margin: auto;margin-bottom: 10rpx;height: 2rpx;background-color: #D8D8D8;opacity: .4;">
            </view>
          </template>
          <view class="zongji_box">
            <view class="left_box">合计</view>
            <view class="right_box" style="color: #DED000;font-weight: 900;">{{ pay_price || '0' }}</view>
          </view>
          <view class="greee">
            <image @click="changeAgree" class="agree_icon" src="https://www.dingxians.cn/images/common/selected.png"
              v-if="agreeStatus">
            </image>
            <image @click="changeAgree" class="agree_icon" src="https://www.dingxians.cn/images/common/unselected.png"
              v-if="!agreeStatus">
            </image>
            <view class="agree_text">
              我已满18岁，已阅读并同意
              <text class="agrees_user" @click.stop="header('/packageB/content/user')">《用户协议》</text>
            </view>
          </view>
          <view class="anniu_box" @click="$no(enterBox)">
            <image src="https://www.dingxians.cn/upload/20250330/67e9055038d68.png" mode="scaleToFill" />
          </view>
          <view style="height: 80rpx;"></view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="rewordpopup" type="bottom">
      <view class="big_bg_box1">
        <view class="close_box1">
          <image @click="$refs.rewordpopup.close()" src="https://www.dingxians.cn/images/shop/close-btn.png"
            mode="scaleToFill" />
        </view>
        <view class="bottom_con_box1"
          style="background-image: url('https://www.dingxians.cn/upload/user_static/common/bg-dialog.png');">
          <view class="top_title1">
            <image src="https://www.dingxians.cn/upload/20250402/67ed1657a36a1.png" mode="scaleToFill" />
          </view>
          <view class="dange_box_rew" v-for="(item, index) in rewordList" :key="index"
            style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed18a205b3c.png');background-size: 100% 100%;">
            <view class="touxiang_box">
              <image :src="item.avatar" mode="scaleToFill" />
            </view>
            <view class="mz_box">{{ item.nickname }}</view>
            <view class="shangpinm_box">
              <view class="sh_box">{{ item.box_prize_name }}</view>
              <view class="xia_box">{{ item.created_at }}</view>
            </view>
            <view class="sl_box">{{ item.box_prize_level_name }}</view>
            <view class="sp_img_box">
              <image :src="item.box_prize_image" mode="scaleToFill" />
            </view>
          </view>
          <view style="height: 80rpx;"></view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="Resultpopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
      <view class="result_big_box">
        <view class="gxhd_box">
          <image src="https://www.dingxians.cn/upload/20250330/67e91c2da3944.png" mode="widthFix" />
        </view>
        <template v-if="prizeArr.length == 1">
          <view class="jpqy_box">
            <view class="dange_box" v-for="item, index in prizeArr" :key="index"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-legend.png');">
              <view class="dengji_name_box">{{ item.box_prize_level_name }}</view>
              <view class="shang_pin_box">
                <image :src="item.box_prize_image" mode="scaleToFill" />
              </view>
              <view class="jiage_box">
                <view class="l_box">￥{{ item.recovery_price || '0.00' }}</view>
                <view class="r_box">x1</view>
              </view>
              <view class="jg_name_box">{{ item.box_prize_name }}</view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="jpqy_box1">
            <view class="dange_box1" v-for="item, index in prizeArr" :key="index"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-legend.png');">
              <view class="dengji_name_box1">{{ item.box_prize_level_name }}</view>
              <view class="shang_pin_box1">
                <image :src="item.box_prize_image" mode="scaleToFill" />
              </view>
              <view class="jiage_box1">
                <view class="l_box1">￥{{ item.recovery_price || '0.00' }}</view>
                <view class="r_box1">x1</view>
              </view>
              <view class="jg_name_box1">{{ item.box_prize_name }}</view>
            </view>
          </view>
        </template>
        <view class="dibu_box">
          <view class="wenzi_box">已为您存放至盒柜 <text style="color: #DED000;"
              @click="header('/pages/box/index', 2)">前往盒柜</text>
          </view>
          <view class="anniu_box">
            <view class="left_an_box" @click="closeResultpop"
              style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ff58.png');">
              关闭
            </view>
            <view class="right_an_box"
              style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
              @click="$no(gotoin)">
              再来一次
            </view>
          </view>

        </view>
      </view>
    </uni-popup>

    <uni-popup ref="Detsppopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
      <view class="big_de_box">
        <view class="top_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');background-size: 100% 100%;">
          <view class="left_box">
            <image :src="dgObj.image" mode="scaleToFill" />
          </view>
          <view class="right_box">
            <view class="t_obox">等级：{{ dgObj.level_id_name }} ({{ dgObj.num }}/{{ dgObj.original_num }})</view>
            <view class="t_fbox">价格：￥{{ dgObj.recovery_price }}</view>
            <view class="t_ebox">概率：{{ (dgObj.probability * 1).toFixed(2) }}%</view>
            <view class="t_jbox">名称：{{ dgObj.title }}</view>
          </view>
        </view>
        <view class="guanbi_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
          @click="$refs.Detsppopup.close()">关闭</view>
      </view>

    </uni-popup>
    <uni-popup ref="bxsppopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
      <view class="big_de_box">
        <view class="top_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');background-size: 100% 100%;">
          <view class="bx_big_box">
            <view class="dange_bx_box" v-for="val, is in dgObj.prize_list" :key="is">
              <view class="left_box1">
                <image :src="val.image" mode="scaleToFill" />
              </view>
              <view class="right_box1">
                <view class="t_obox1">等级：{{ val.level_name }} ({{ val.num }}/{{ val.original_num }})</view>
                <view class="t_fbox1">价格：￥{{ val.recovery_price }}</view>
                <view class="t_ebox1">概率：{{ (val.probability * 1).toFixed(2) }}%</view>
                <view class="t_jbox1">名称：{{ val.title }}</view>
              </view>
            </view>

          </view>

        </view>
        <view class="guanbi_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
          @click="$refs.bxsppopup.close()">关闭</view>
      </view>

    </uni-popup>
    <view class="big_box">
      <view class="sm_box" @click="screen('sx')">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d34919.png" mode="scaleToFill" />
      </view>
      <view class="sm_box" @click="screen('gz')">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d25d15.png" mode="scaleToFill" />
      </view>
    </view>
    <view class="big_box1">
      <button class="sm_box" @click="screen('fx')" open-type="share">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d2dfab.png" mode="scaleToFill" />
      </button>
      <view class="sm_box" @click="screen('sd')">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d29cc7.png" mode="scaleToFill" />
      </view>
      <view class="sm_box" @click="screen('jl')">
        <image src="https://www.dingxians.cn/upload/20250325/67e2389d2af38.png" mode="scaleToFill" />
      </view>
    </view>
    <!-- <leftFixed @screen="screen"></leftFixed> -->
    <!-- <rightFixed  @getReword="getReword"></rightFixed> -->
    <tn-popup v-model="rechare" mode="center" @open="open" @close="close">
      <view class="popup bdbx"
        :style="{ backgroundImage: `url(https://www.dingxians.cn/upload/user_static/common/bg-alert-dialog.png)` }">
        <view class="rule_title_box">截图保存二维码使用支付宝支付</view>
        <view class="close" @click.stop="rechare = false"
          style="background-image: url('https://www.dingxians.cn/upload/20250513/6822ecb30f58e.png');"></view>
        <view class="content_box">
          <ayQrcode ref="qrcode" :modal="modal_qr" :url="qr_url" @hideQrcode="hideQrcode" :height="200" :width="200"
            style="margin: auto;" />
        </view>
      </view>
    </tn-popup>
  </z-paging>
</template>
<script>
import api from '../../api/index.js'
import noClick from '../../utils/noClick.js'
// import leftFixed from '../../components/leftFixed.vue'
// import rightFixed from '../../components/rightFixed.vue'
export default {
  components: {
    // leftFixed, rightFixed,
  },
  data() {
    return {
      noClick: true,
      showMoreBtn: false,
      payList: [
        {
          id: 1,
          burst: 1,
          url: 'https://www.dingxians.cn/upload/20250325/67e23938c872c.png'
        },
        {
          id: 2,
          burst: 3,
          url: 'https://www.dingxians.cn/upload/20250325/67e23938d0407.png'
        },
        {
          id: 3,
          burst: 5,
          url: 'https://www.dingxians.cn/upload/20250325/67e23938c7830.png'
        },
        {
          id: 5,
          burst: 10,
          url: 'https://www.dingxians.cn/upload/20250325/67e26d562b117.png'
        },
        {
          id: 6,
          burst: '',
          url: 'https://www.dingxians.cn/upload/20250325/67e26d562f0aa.png'
        },
        {
          id: 4,
          burst: '',
          url: 'https://www.dingxians.cn/upload/20250325/67e26d691c962.png'
        },
      ],
      mhId: '',//盒子id
      package: '',
      detailObj: {//详情对象
        challenge_box_data: {
          name: ''
        },
        data: [],//商品数组
      },
      //二维码相关参数
      modal_qr: false,
      rechare: false,
      qr_url: '',
      pay_more_mode: 2,
      pay_mode_list: [
        {
          id: 1,
          icon: 'https://www.dingxians.cn/images/common/wechat.png',
          name: '微信'
        },
        {
          id: 2,
          icon: 'https://www.dingxians.cn/images/common/alipay.png',
          name: '支付宝'
        }
      ],
      bigObjImage: '',//商品大图展示
      boxs: '',//当前箱数,//默认空就是最新的一箱
      catId: '',//擂台类型
      payShow: false,//支付弹窗
      agreeStatus: true,//协议
      pay_num: '',//几抽
      balance: '',//虎元素
      point: '',//虎币
      pay_price: '',//需额外支付金额
      si_dPay: false,//是否需要额外支付
      zongjiPrice: '',//总计支付
      package: '', //包套1 锁箱2
      prizeArr: [],//抽奖结果
      foulPlay: '',//小闯关模式：1
      home: 1,//home==1 分享过来的 直接switchTab中路
      rewordList: [],//记录
      dgObj: {},//单个商品详情
      out_trade_no: '',
    }
  },
  onLoad(item) {
    this.mhId = item.mhId
    this.boxs = item.boxs
    this.catId = item.catId; //擂台类型
    this.home = 1//home==1 分享过来的 直接switchTab中路
  },

  onHide() {
    // 离开页面的时候清空boxs
    uni.setStorageSync('boxs', '')
    this.rechare = false
  },
  onShow() {
    // 如果本地有boxs 则复制
    if (uni.getStorageSync('boxs')) {
      this.boxs = uni.getStorageSync('boxs')
    }
    setTimeout(() => {
      if (this.out_trade_no) {
        api.rechargeOrders
          .getRechargeOrdersInfo({
            order_no: this.out_trade_no
          }).then(res => {
            if (res.code == 200) {
              if (res.data.data.status == 1) {
                this.show('支付成功')
                setTimeout(() => {
                  this.payBanalce()
                }, 500)
              } else {
                this.show('支付失败')
              }
              console.log(res)
            }
          })
      }
    },400)

    this.getDetail(); //擂台详情
  },
  methods: {
    timeup() {
      this.getDetail()
    },
    onShareAppMessage() {
      let that = this
      return {

        title: that.detailObj.challenge_box_data.name + '第' + that.boxs + '箱，共' + that.detailObj.total_num + '件，已开' +
          that.detailObj.participations_num + '件，还剩' + that.detailObj.difference_num + '件',

        imageUrl: that.detailObj.challenge_box_data.image,
        path: '/pages/practice/detail?mhId=' + that
          .mhId + '&catId=' + that.catId + '&boxs=' + that.boxs + '&home=' + 1,
        type: 0,
      }
    },
    // 分享的内容
    // onShare() {
    //   let that = this
    //   uni.share({
    //     provider: 'weixin',
    //     scene: "WXSceneSession",
    //     type: 5,
    //     imageUrl: that.detailObj.challenge_box_data.image,
    //     title: that.detailObj.challenge_box_data.name + '第' + that.boxs + '箱，共' + that.detailObj.total_num + '件，已开' +
    //       that.detailObj.participations_num + '件，还剩' + that.detailObj.difference_num + '件',
    //     miniProgram: {
    //       id: 'gh_7cbc8087cb4f',
    //       path: 'practice/detail?mhId=' + that
    //         .mhId + '&catId=' + that.catId + '&boxs=' + that.boxs + '&home=' + 1,
    //       type: 0,
    //       webUrl: 'https://www.dingxians.cn'
    //     },
    //     success: ret => {
    //       console.log('success', ret);
    //     },
    //     fail: err => {
    //       console.log('error', err);
    //     }
    //   });
    // },
    //换箱
    switchBox() {
      let tabIndex = 0 //换箱tabs的选择区域的索引
      if (this.boxs <= 10) {
        tabIndex = 0
      } else if (this.boxs > 10 && this.boxs <= 100) {
        if (this.boxs % 10 == 0) {
          tabIndex = this.boxs.toString().substring(0, 1) - 1
        } else {
          tabIndex = this.boxs.toString().substring(0, 1)
        }
      } else if (this.boxs > 100 && this.boxs <= 1000) {
        if (this.boxs % 10 == 0) {
          tabIndex = this.boxs.toString().substring(0, 2) - 1
        } else {
          tabIndex = this.boxs.toString().substring(0, 2)
        }
      } else if (this.boxs > 1000 && this.boxs <= 10000) {
        if (this.boxs % 10 == 0) {
          tabIndex = this.boxs.toString().substring(0, 3) - 1
        } else {
          tabIndex = this.boxs.toString().substring(0, 3)
        }
      } else {
        if (this.boxs % 10 == 0) {
          tabIndex = this.boxs.toString().substring(0, 4) - 1
        } else {
          tabIndex = this.boxs.toString().substring(0, 4)
        }
      }
      this.header('/pages/practice/hx?mhId=' + this.mhId + '&tabIndex=' + tabIndex)
    },
    back() {
      if (this.home == 1) {
        uni.switchTab({ url: '/pages/practice/index' })
      } else {
        uni.navigateBack({ delta: 1 })
      }
    },
    // 功能按钮
    screen(item) {
      if (item == 'sx') {
        this.getDetail()
      } else if (item == 'gz') {
        this.header('/packageB/content/playRule?content=' + 'play_rule')
      } else if (item == "fx") {
        // this.onShareAppMessage() //分享
      } else if (item == 'sd') {
        this.header('/pages/box/index', 2)
      } else if (item == 'jl') {
        this.getReword()
      }
    },
    getReword() {

      api.index
        .challengeBoxOrderPrizesWinnerRecord({ boxs: this.boxs, challenge_box_id: this.mhId })
        .then((res) => {

          this.rewordList = res.data.data.data
          this.$refs.rewordpopup.open()
        })
    },
    getDetail() {

      api.index
        .challengeBoxDetail(this.mhId, { boxs: this.boxs, cat_id: this.catId })
        .then((res) => {
          this.detailObj = res.data
          this.bigObjImage = res.data.data[0].image
          this.boxs = res.data.challenge_box_data.current_boxs; //当前箱数
        })
    },
    // 点击商品
    spDet(item) {
      // this.bigObjImage = item.image
      if (item.level_id == 9 || item.level_id == 10) {
        this.dgObj = item
        this.$refs.bxsppopup.open()
      } else {
        this.dgObj = item
        this.$refs.Detsppopup.open()
      }

    },
    //上一箱
    upperBtn() {
      if (this.boxs > 1) {
        this.boxs--;
        this.getDetail();
        // this.getReword() // 获取抽赏记录
      } else {
        this.show("已经是第一箱了");
      }
    },
    //下一箱
    lowerBtn() {
      if (this.boxs < this.detailObj.challenge_box_data.total_boxs) {
        this.boxs++;
        this.getDetail();
        // this.getReword() // 获取抽赏记录
      } else {
        this.show("已经是最后一箱了");
      }
    },
    // 打开支付弹窗
    openPay(item) {
      this.package = '' //包套1 锁箱2
      this.burst = item.burst
      if (this.catId == 1 || item.catId == 6) {
        if (item.burst == 1) {
          this.pay_num = item.id
          this.mPayment(); // 判断余额是否足够，足够：虎元素扣多少，虎币扣多少
        } else {
          this.show('只能一发入魂')
        }
      } else if (this.catId == 4) {
        if (item.id == 5) {
          console.log('包套')
          this.package = 1
          this.burst = this.detailObj.challenge_box_data.yd_num
          this.mPayment(); // 判断余额是否足够，足够：虎元素扣多少，虎币扣多少
        } else if (item.id == 6) {
          console.log('锁箱')
          this.package = 2
          this.burst = this.detailObj.challenge_box_data.yd_num
          this.mPayment(); // 判断余额是否足够，足够：虎元素扣多少，虎币扣多少
        } else {
          this.pay_num = item.id
          this.mPayment(); // 判断余额是否足够，足够：虎元素扣多少，虎币扣多少
        }
      } else {
        this.pay_num = item.id
        this.mPayment(); // 判断余额是否足够，足够：虎元素扣多少，虎币扣多少
      }
    },
    // 判断余额是否足够
    mPayment() {
      var data = {
        cat_id: this.catId,
        challenge_box_id: this.mhId,
        boxs: this.boxs, //当前第几箱
        pay_mode: this.pay_num,
        multiple: 1,
        coupon_id: "",
        package: this.package //包套1、锁箱2
      };
      this.zongjiPrice = this.burst * this.detailObj.challenge_box_data.price
      api.index
        .challengeBoxConfirmPaymentPage(data)
        .then((res) => {
          uni.hideLoading()
          this.foulPlay = res.data.data.tag //1:小闯关
          if (res.code == 401) {
            this.balance = res.data.data.deduction_balance;
            this.point = res.data.data.deduction_point;
            this.pay_price = res.data.data.pay_price;
            this.si_dPay = true;
            this.getDetail(); //擂台详情
            this.open()
            this.$refs.Resultpopup.close()
          } else if (res.code == 200) {
            this.balance = res.data.data.deduction_balance;
            this.point = res.data.data.deduction_point;
            this.pay_price = res.data.data.pay_price;
            this.si_dPay = false;
            this.getDetail(); //擂台详情
            this.open()
            console.log(this.balance, this.point, this.pay_price)
          }
        })
    },
    // 立即开盒
    enterBox() {
      if (!this.agreeStatus) {
        this.show('请先同意协议！')
        return
      }
      if (this.si_dPay) {
        console.log('跳转微信支付')
        this.payMentapily()
      } else {
        console.log('开始抽奖')
        this.payBanalce()
      }
    },
    // 微信或支付宝支付
    payMentapily() {
      let data = {
        type: this.pay_more_mode,
        id: 0,
        amount: this.pay_price,
      }
      api.rechargeOrders
        .store(data)
        .then((res) => {
          console.log(res)
          var pay_data = res.data.data
          if (this.pay_more_mode == 1) {
            uni.requestPayment({
              provider: 'wxpay',
              timeStamp: pay_data.timeStamp.toString(),
              nonceStr: pay_data.nonceStr,
              signType: 'MD5',
              package: pay_data.package,
              paySign: pay_data.paySign,
              success: (res) => {
                this.show('支付成功')
                setTimeout(() => {
                  this.payBanalce()
                }, 500)
              },
              fail: (err) => {
                console.log(err)
              },
            })
          } else {
            this.out_trade_no = ''
            this.qr_url = pay_data.qr_code
            this.out_trade_no = pay_data.out_trade_no
            this.showQrcode()
          }

        })
    },
    // 展示二维码
    showQrcode() {
      let _this = this;
      _this.rechare = true
      this.modal_qr = true;
      // uni.showLoading()
      setTimeout(function () {
        // uni.hideLoading()
        _this.$refs.qrcode.crtQrCode()
      }, 50)
    },

    //传入组件的方法
    hideQrcode() {
      this.modal_qr = false;
    },
    // 开奖
    payBanalce() {
      this.prizeArr = []
      var data = {
        cat_id: this.catId,
        challenge_box_id: this.mhId, //箱子id
        pay_mode: this.pay_num,
        boxs: this.detailObj.challenge_box_data.current_boxs, //当前第几箱
        multiple: 1,
        coupon_id: "",
        point_price: this.point,
        package: this.package
      };
      console.log(data)
      if (this.catId == 4) { //多随机开奖
        if (this.foulPlay == 1) {//小闯关开奖
          api.index
            .draw_eight(data)
            .then((res) => {
              uni.hideLoading()
              if (res.code == 200) {
                this.prizeArr = res.data.participations_arr
                this.getDetail()
                this.close()
                this.$refs.Resultpopup.open()
              } else if (res.code == 401) {
                this.show('余额不足')
                this.mPayment()
              } else {
                this.$refs.Resultpopup.close()
                this.close()
                this.show(res.msg)
              }
            })
        } else {//普通多随机开奖
          api.index
            .challengeBoxDraw_six(data)
            .then((res) => {
              uni.hideLoading()
              if (res.code == 200) {
                this.prizeArr = res.data.participations_arr
                this.getDetail()
                this.close()
                this.$refs.Resultpopup.open()
              } else if (res.code == 401) {
                this.show('余额不足')
                this.mPayment()
              } else {
                this.$refs.Resultpopup.close()
                this.close()
                this.show(res.msg)
              }
            })
        }

      } else if (this.catId == 6) {//box开奖
        api.index
          .draw_box(data)
          .then((res) => {
            if (res.code == 200) {
              uni.hideLoading()
              this.prizeArr = res.data.participations_arr
              this.getDetail()
              this.close()
              this.$refs.Resultpopup.open()
            }
          })
      } else if (this.catId == 7) {
        api.index
          .draw_seven(data)
          .then((res) => {
            if (res.code == 200) {
              uni.hideLoading()
              this.prizeArr = res.data.participations_arr
              this.getDetail()
              this.close()
              this.$refs.Resultpopup.open()
            }
          })
      } else {
        api.index
          .challengeBoxDraw_one(data)
          .then((res) => {
            if (res.code == 200) {
              uni.hideLoading()
              this.prizeArr = res.data.participations_arr
              this.getDetail()
              this.close()
              this.$refs.Resultpopup.open()
            }
          })
      }


    },
    // 再来一次
    gotoin() {
      if (this.catId == 4 || this.catId == 7) {
        uni.showLoading({
          title: '加载中'
        })
        this.payBanalce()
      } else {
        this.Resultshow = false
        this.drawResultShow = false;
      }
    },
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    closeResultpop() {
      this.$refs.Resultpopup.close()
    },
    // 协议
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
  background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-detail.png") !important;
}
/deep/.uni-countdown {
  display: inline !important;
}


/deep/.tn-popup__content__center_box {
  background-color: rgba(255, 255, 255, 0) !important;
}

.popup {
  width: 708rpx;
  height: 709rpx;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 46rpx;

  .close {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    background-size: 100% 100%;
    top: 44rpx;
    right: 53rpx;
  }

  .rule_title_box {
    margin: auto;
    width: 100%;
    height: 112rpx;
    line-height: 112rpx;
    margin-bottom: 33rpx;
    background-size: 100% 100%;
    font-family: Source Han Serif CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
  }

  .content_box {
    width: 100%;
    height: 300rpx;
    display: flex;
    justify-content: center;
  }

}

.big_box {
  width: 88rpx;
  position: absolute;
  left: 22rpx;
  top: 288rpx;

  .sm_box {
    width: 87rpx;
    height: 108rpx;
    margin-bottom: 40rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.big_box1 {
  width: 88rpx;
  position: absolute;
  right: 22rpx;
  top: 207rpx;

  .sm_box {
    width: 87rpx;
    height: 108rpx;
    margin-bottom: 40rpx;
    padding: 0;
    background: transparent;
    border: none;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.header_box {
  width: 750rpx;
  height: 180rpx;
  box-sizing: border-box;
  padding-top: 92rpx;
  margin-bottom: 218rpx;

  .biaoti_box {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;

    .left_icon_box {
      width: 80rpx;
      height: 80rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_biaoti_box {
      width: 380rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 40rpx;
      color: #fff;
      font-weight: 900;
    }
  }
}


.guangquan_box {
  width: 598rpx;
  height: 398rpx;
  margin: auto;
  background-image: url('https://www.dingxians.cn/upload/20250325/67e223759ae29.png');
  background-size: 100% 100%;
  position: relative;

  .shangpin_box {
    width: 330rpx;
    height: 334rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: -79rpx;
    margin: auto;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .pd_sx_box {
    width: 450rpx;
    height: 60rpx;
    line-height: 60rpx;
    background-size: 100% 100%;
    position: absolute;
    bottom: 100rpx;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-family: Source Han Serif CN;
    font-weight: bold;
    font-size: 20rpx;
    color: #FFFFFF;
    margin-top: -44rpx;
    margin-bottom: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .sx_tx_box {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
      }
    }

    .dwl_box {
      width: 70rpx;
      margin-right: 8rpx;
    }

    .time_box {
      // display: flex;
      margin: 0 10rpx;
    }
  }

}


.gn_box {
  width: 750rpx;
  height: 164rpx;
  margin-top: -90rpx;
  margin-bottom: 24rpx;
  position: relative;

  .last_xiang_box {
    width: 276rpx;
    height: 83rpx;
    position: absolute;
    left: 0;
    top: 0;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .center_img {
    width: 327rpx;
    height: 155rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 4rpx;
    margin: auto;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .next_xiang_box {
    width: 276rpx;
    height: 83rpx;
    position: absolute;
    top: 0;
    right: 0;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .x_y_box {
    position: absolute;
    width: 251rpx;
    height: 69rpx;
    bottom: 4rpx;
    left: 110rpx;
    background-image: url('https://www.dingxians.cn/upload/20250325/67e23e4de765d.png');
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 18rpx;
    line-height: 64rpx;
  }

  .x_z_box {
    position: absolute;
    width: 251rpx;
    height: 69rpx;
    bottom: 4rpx;
    right: 110rpx;
    background-image: url('https://www.dingxians.cn/upload/20250325/67e23e4de7216.png');
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 18rpx;
    line-height: 64rpx;
  }

  .kongche_box {
    position: absolute;
    width: 120rpx;
    height: 40rpx;
    bottom: 4rpx;
    right: 10rpx;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 18rpx;
    line-height: 40rpx;
  }

}

.shangpin_box {
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 22rpx;
  box-sizing: border-box;

  .dange_box {
    width: 223rpx;
    height: 306rpx;
    background-image: url('https://www.dingxians.cn/upload/20250325/67e23938c22a1.png');
    background-size: 100% 100%;
    flex-shrink: 0;
    margin-bottom: 19rpx;
    box-sizing: border-box;
    padding-top: 16rpx;
    position: relative;

    .dengjiname_box {
      box-sizing: border-box;
      width: 100%;
      height: 50rpx;
      font-weight: 800;
      line-height: 50rpx;
      font-size: 32rpx;
      background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-left: 10px;
    }

    .sls_box {
      box-sizing: border-box;
      width: auto;
      height: 50rpx;
      top: 14rpx;
      right: 10rpx;
      font-weight: 800;
      position: absolute;
      line-height: 50rpx;
      font-size: 22rpx;
      background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .sp_box {
      width: 180rpx;
      height: 174rpx;
      margin: auto;
      margin-bottom: 9rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .gl_box {
      width: 100%;
      height: 24rpx;
      font-size: 16rpx;
      text-align: center;
      line-height: 16rpx;
      color: #fff;
      margin-bottom: 9rpx;
    }

    .name_box {
      width: 100%;
      height: 24rpx;
      font-size: 16rpx;
      text-align: center;
      line-height: 20rpx;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.pay_box {
  position: fixed;
  bottom: 45rpx;
  display: flex;
  width: 100%;
  justify-content: space-between;

  // padding: 0 18rpx;
  .dange_zhifubox {
    width: 228rpx;
    height: 84rpx;
    background-size: 100% 100%;
  }
}

.pay_box1 {
  position: fixed;
  bottom: 145rpx;
  height: 84prx;
  // background-color: red;
  display: flex;
  width: 100%;
  justify-content: flex-start;

  .btn-other-right {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 24rpx;
    background-size: 100% 100%;
    background-image: url("https://www.dingxians.cn/upload/user_static/index/btn-other.png");
    right: 0;
    color: #fff;
    text-align: center;

    .btn-close {
      width: 100rpx;
      height: 100rpx;
      // transform: rotateZ(45deg);
    }
  }

  // padding: 0 18rpx;
  .dange_zhifubox {
    width: 210rpx;
    height: 84rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

}

.big_bg_box {
  width: 100%;
  // height: 1204rpx;
  position: relative;

  .close_box {
    width: 100%;
    height: 64rpx;
    position: relative;

    image {
      width: 64rpx;
      height: 64rpx;
      right: 20rpx;
      top: 0;
      position: absolute;
    }
  }

  .bottom_con_box {
    width: 100%;
    // height: 1120rpx;
    background-size: 100% 100%;
    // position: absolute;
    // bottom: 0;
    box-sizing: border-box;
    padding-top: 10rpx;

    .top_title {
      width: 256rpx;
      height: 52rpx;
      margin: auto;
      margin-bottom: 40rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .zongji_box {
      width: 654rpx;
      height: 100rpx;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left_box {
        height: 100%;
        line-height: 100rpx;
        font-size: 28rpx;
        color: #fff;

      }

      .right_box {

        height: 100%;
        line-height: 100rpx;
        font-size: 28rpx;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        // align-items: center;

        .pay_icon_box {
          width: 40rpx;
          height: 40rpx;
          margin-top: 10rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .sel_pay_box {
      width: 654rpx;
      margin: auto;
      height: 50rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 50rpx;
    }

    .zs_pay_box {
      width: 654rpx;
      height: 100rpx;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .p_lk_box {
        display: flex;
        justify-content: flex-start;
        height: 100%;
        line-height: 100rpx;
        font-size: 28rpx;
        color: #fff;

        .wxicon_box {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
          margin-top: 6rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .p_r_box {
        width: 28rpx;
        height: 28rpx;

        image {
          width: 100%;
          height: 100%;
          margin-bottom: 10rpx;
        }
      }
    }

    .greee {
      font-size: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      margin-bottom: 40rpx;

      .agree_icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        margin-top: 8rpx;
        margin-left: 78rpx;
      }

      .agrees_user {
        color: #ded000;
      }
    }

    .anniu_box {
      width: 610rpx;
      height: 84rpx;
      background-image: url('https://www.dingxians.cn/upload/20250330/67e90521a8785.png');
      background-size: 100% 100%;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      // margin-bottom: 80rpx;

      image {
        width: 133rpx;
        height: 36rpx;
      }
    }
  }
}

.big_bg_box1 {
  width: 100%;
  height: 900rpx;
  position: relative;

  .close_box1 {
    width: 100%;
    height: 64rpx;
    position: relative;

    image {
      width: 64rpx;
      height: 64rpx;
      right: 20rpx;
      top: 0;
      position: absolute;
    }
  }

  .bottom_con_box1 {
    width: 100%;
    height: calc(900rpx - 64rpx);
    background-size: 100% 100%;
    // position: absolute;
    // bottom: 0;
    box-sizing: border-box;
    padding-top: 10rpx;
    overflow: hidden;
    overflow-y: auto;

    .top_title1 {
      width: 256rpx;
      height: 52rpx;
      margin: auto;
      margin-bottom: 40rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .dange_box_rew {
      width: 674rpx;
      height: 90rpx;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;
      padding: 0 20rpx 0 11rpx;

      .touxiang_box {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .mz_box {
        width: 69rpx;
        height: 64rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff;
        line-height: 64rpx;
        font-size: 24rpx;
      }

      .shangpinm_box {
        width: 344rpx;
        height: 90rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #D1D0D8;
        font-size: 24rpx;

        .sh_box {
          height: 45rpx;
          line-height: 45rpx;
        }

        .xia_box {
          height: 45rpx;
          line-height: 45rpx;
        }
      }

      .sl_box {
        width: auto;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 24rpx;
        background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }

      .sp_img_box {
        width: 80rpx;
        height: 80rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}


.result_big_box {
  width: 750rpx;
  height: 1400rpx;

  // background-color: pink;
  .gxhd_box {
    width: 599rpx;
    height: 104rpx;
    margin: auto;
    margin-bottom: 100rpx;

    image {
      width: 100%;
    }
  }

  .jpqy_box {
    width: 100%;
    height: 900rpx;
    // background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;

    .dange_box {
      width: 540rpx;
      height: 720rpx;
      background-size: 100% 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 70rpx;

      .dengji_name_box {
        top: 0;
        left: 0;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 130rpx;
        font-weight: 900;
        line-height: 130rpx;
        font-size: 56rpx;
        background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 20rpx;
      }

      .shang_pin_box {
        width: 400rpx;
        height: 400rpx;
        margin: auto;
        margin-bottom: 20rpx;

        image {
          width: 100%;
          height: 400rpx;
        }
      }

      .jiage_box {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        box-sizing: border-box;
        padding: 0 70rpx;
        display: flex;
        justify-content: space-between;

        .l_box {
          font-size: 40rpx;
          font-weight: 900;
          color: #fff;
        }

        .r_box {
          font-size: 40rpx;
          font-weight: 900;
          color: #ccc;
        }
      }

      .jg_name_box {
        box-sizing: border-box;
        font-size: 32rpx;
        width: 100%;
        padding: 0 70rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        color: #fff;
        /* 限制为 3 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  .jpqy_box1 {
    width: 100%;
    height: 900rpx;
    // background-color: pink;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0 18rpx;
    align-items: center;
    margin-bottom: 30rpx;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;

    .dange_box1 {
      flex-shrink: 0;
      width: 224rpx;
      height: 300rpx;
      background-size: 100% 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 30rpx;
      margin-bottom: 20rpx;

      .dengji_name_box1 {
        top: 10rpx;
        left: 0;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 50rpx;
        font-weight: 500;
        line-height: 50rpx;
        font-size: 28rpx;
        background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 10rpx;
      }

      .shang_pin_box1 {
        width: 170rpx;
        height: 170rpx;
        margin: auto;
        margin-bottom: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .jiage_box1 {
        width: 100%;
        height: 26rpx;
        line-height: 26rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;

        .l_box1 {
          font-size: 26rpx;
          font-weight: 500;
          color: #fff;
        }

        .r_box1 {
          font-size: 26rpx;
          font-weight: 500;
          color: #ccc;
        }
      }

      .jg_name_box1 {
        box-sizing: border-box;
        font-size: 26rpx;
        width: 100%;
        padding: 0 10rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        color: #fff;
        /* 限制为 3 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
      }
    }
  }

  .dibu_box {
    width: 100%;

    .wenzi_box {
      width: 100%;
      height: 30rpx;
      line-height: 30rpx;
      font-size: 26rpx;
      font-weight: normal;
      line-height: 30rpx;
      letter-spacing: normal;
      color: #FFFFFF;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .anniu_box {
      width: 610rpx;
      height: 84rpx;
      margin: auto;
      display: flex;
      justify-content: space-between;

      .left_an_box,
      .right_an_box {
        width: 276rpx;
        height: 84rpx;
        background-size: 100% 100%;
        line-height: 84rpx;
        color: #fff;
        font-size: 34rpx;
        text-align: center;
        font-weight: 700;
      }

    }
  }
}

.big_de_box {
  width: 700rpx;
  height: 800rpx;

  .top_box {
    width: 700rpx;
    height: 559rpx;
    margin-bottom: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .bx_big_box {
      width: 640rpx;
      height: 480rpx;
      margin: auto;
      overflow: hidden;
      overflow-y: auto;

      .dange_bx_box {
        width: 640rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 10rpx;

        .left_box1 {
          width: 200rpx;
          height: 200rpx;
          background-image: url('https://www.dingxians.cn/upload/20250402/67ed28d6e47c4.png');
          background-size: 100% 100%;
          margin-right: 10rpx;

          image {
            width: 200rpx;
            height: 200rpx;
          }
        }

        .right_box1 {
          width: 280rpx;
          height: 200rpx;
          margin-left: 10rpx;

          .t_obox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 32rpx;
            font-weight: 900;
            color: #DED000;
          }

          .t_fbox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 32rpx;
            font-weight: 900;
            color: #fff;
          }

          .t_ebox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 22rpx;
            font-weight: 900;
            color: #A0A0A0;
          }

          .t_jbox1 {
            width: 280rpx;
            // height: 90rpx;
            // line-height: 90rpx;
            font-size: 22rpx;
            font-weight: 900;
            color: #A0A0A0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 限制为 2 行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

      }

      .left_box1 {
        width: 200rpx;
        height: 200rpx;
        background-image: url('https://www.dingxians.cn/upload/20250402/67ed28d6e47c4.png');
        background-size: 100% 100%;
        margin-right: 10rpx;

        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .right_box1 {
        width: 280rpx;
        height: 200rpx;
        margin-left: 10rpx;

        .t_obox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 32rpx;
          font-weight: 900;
          color: #DED000;
        }

        .t_fbox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 32rpx;
          font-weight: 900;
          color: #fff;
        }

        .t_ebox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 22rpx;
          font-weight: 900;
          color: #A0A0A0;
        }

        .t_jbox1 {
          width: 280rpx;
          // height: 90rpx;
          // line-height: 90rpx;
          font-size: 22rpx;
          font-weight: 900;
          color: #A0A0A0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 限制为 2 行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .left_box {
      width: 318rpx;
      height: 318rpx;
      background-image: url('https://www.dingxians.cn/upload/20250402/67ed28d6e47c4.png');
      background-size: 100% 100%;
      margin-right: 10rpx;

      image {
        width: 318rpx;
        height: 318rpx;
      }
    }

    .right_box {
      width: 318rpx;
      height: 400rpx;
      margin-left: 10rpx;

      .t_obox {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 32rpx;
        font-weight: 900;
        color: #DED000;
      }

      .t_fbox {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 32rpx;
        font-weight: 900;
        color: #fff;
      }

      .t_ebox {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 24rpx;
        font-weight: 900;
        color: #A0A0A0;
      }

      .t_jbox {
        width: 318rpx;
        // height: 90rpx;
        // line-height: 90rpx;
        font-size: 24rpx;
        font-weight: 900;
        color: #A0A0A0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 限制为 2 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .guanbi_box {
    margin: auto;
    width: 276rpx;
    height: 84rpx;
    background-size: 100% 100%;
    line-height: 84rpx;
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    font-weight: 700;
  }
}
</style>